<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>

<head>
  <meta charset="utf-8">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>

<body>
  <custom-style>
    <style is="custom-style">
      html {
        --mixin: {
          border: 2px solid rgb(255, 0, 0);
        };
      }
    </style>
  </custom-style>

  <custom-style>
    <style is="custom-style">
      #target {
        @apply --mixin;
      }
    </style>
  </custom-style>

  <div id="target"></div>
  <dom-if><template></template></dom-if>
  <dom-repeat><template></template></dom-repeat>

  <script type="module">
import { PolymerElement } from '../../polymer-element.js';
class XFoo extends PolymerElement {
  connectedCallback() {
    this.spy = sinon.spy(window.ShadyCSS, 'styleElement');
    super.connectedCallback();
    this.spy.restore();
  }
}
customElements.define('x-foo', XFoo);
</script>

  <script type="module">
suite('styling-only-template', function () {

  function assertComputed(element, value, pseudo) {
    var computed = getComputedStyle(element, pseudo);
    assert.equal(computed['border-top-width'], value, 'computed style incorrect');
  }

  test('elements without templates do not call ShadyCSS', () => {
    let el = document.createElement('x-foo');
    document.body.appendChild(el);
    assert.ok(el.spy);
    assert.isTrue(el.spy.notCalled);
  });

  test('dom-repeat and dom-if do not break custom-style', () => {
    // force custom-style flushing
    let target = document.querySelector('#target');
    window.ShadyCSS.styleDocument();
    assertComputed(target, '2px');
  });
});
</script>
</body>
